.loading{

    #loading1{
      background-color: #bd4932;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;
        #loading-center{
          width: 100%;
          height: 100%;
          position: relative;
        }
        #loading-center-absolute {
          position: absolute;
          left: 50%;
          top: 50%;
          height: 200px;
          width: 200px;
          margin-top: -100px;
          margin-left: -100px;
        }
        #object{
          width: 80px;
          height: 80px;
          background-color: #FFF;
          animation: animate1 1s infinite ease-in-out;
          margin-right: auto;
          margin-left: auto;
          margin-top: 60px;
        }
        
        @keyframes animate1 {
          0% { 
            transform: perspective(160px) rotateX(0deg) rotateY(0deg); 
          } 
          50% { 
            transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
          } 
          100% { 
            transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
          }
        }
    }

    #loading2{
      background-color: #db9e36;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;
        #loading-center{
          width: 100%;
          height: 100%;
          position: relative;
        }
        #loading-center-absolute {
          position: absolute;
          left: 50%;
          top: 50%;
          height: 150px;
          width: 150px;
          margin-top: -75px;
          margin-left: -75px;
          transform: rotate(45deg);
        }
        .object{
          width: 20px;
          height: 20px;
          background-color:#FFF;
          position: absolute;
          left: 65px;
          top: 65px;
        }
        .object:nth-child(2n+0) {
          margin-right: 0px;
        }
        
        
        #object_one {
          animation: object_one2 2s infinite;
          animation-delay: 0.2s; 
        }
        #object_two {
          animation: object_two2 2s infinite; 
          animation-delay: 0.3s; 
        }
        #object_three {
          animation: object_three2 2s infinite;
          animation-delay: 0.4s; 
        }
        #object_four {
          animation: object_four2 2s infinite;
          animation-delay: 0.5s; 
        }
        #object_five {
          animation: object_five2 2s infinite;
          animation-delay: 0.6s; 
        }
        #object_six {
          animation: object_six2 2s infinite;
          animation-delay: 0.7s; 
        }
        #object_seven {
          animation: object_seven2 2s infinite;
          animation-delay: 0.8s; 
        }
        #object_eight {
          animation: object_eight2 2s infinite;
          animation-delay: 0.9s; 
        }
        
        #object_big{
          position: absolute;
          width: 50px;
          height: 50px;
          left: 50px;
          top: 50px;
          animation: object_big2 2s infinite;
          animation-delay: 0.5s; 
        }	
        
     
        
        @keyframes object_big2 {
          50% { 
            transform: scale(0.5);
          }
        }
        
      
        
        @keyframes object_one2 {
          50% { 
            transform: translate(-65px,-65px) ;
          }
        }
      
        
        @keyframes object_two2 {
          50% { 
            transform: translate(0,-65px) ;
          }  
        }
        
        @keyframes object_three2 {
          50% { 
            transform: translate(65px,-65px) ;
          } 
        }
        
        
        @keyframes object_four2 {
          50% { 
            transform: translate(65px,0) ;
          }  
        }
        
        @keyframes object_five2 {
          50% { 
            transform: translate(65px,65px) ;
          }  
        }
        @keyframes object_six2 {
          50% { 
            transform:  translate(0,65px) ;
          }
        }
        
        @keyframes object_seven2 {
          50% { 
            transform: translate(-65px,65px) ;
          }
        }
        
        @keyframes object_eight2 {
          50% { 
            transform: translate(-65px,0) ;
          }
        }
    } 

    #loading3{
        background-color: #ffd34e;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 9999;
        margin-top: 0px;
        top: 0px;

        #loading-center{
          width: 100%;
          height: 100%;
          position: relative;
        }
        #loading-center-absolute {
          position: absolute;
          left: 50%;
          top: 50%;
          height: 200px;
          width: 200px;
          margin-top: -100px;
          margin-left: -100px;
        }
        .object{
          width: 50px;
          height: 50px;
          background-color: rgba(255,255,255,0);
          margin-right: auto;
          margin-left: auto;
          border: 4px solid #FFF;
          left: 73px;
          top: 73px;
          position: absolute;
        }
        
        #first_object{
          animation: first_object_animate 1s infinite ease-in-out;
        }
            
        #second_object{
          animation: second_object3 1s forwards, second_object_animate3 1s infinite ease-in-out;
        }	
        #third_object{
          animation: third_object3 1s forwards, third_object_animate3 1s infinite ease-in-out;
        }	
            
         	
        @keyframes second_object3 {
          100% { width: 100px; height:100px; left: 48px; top: 48px; }
        }
        	
        @keyframes third_object3 {
          100% { width: 150px; height:150px; left: 23px; top: 23px;}
        }
        
        
        @keyframes first_object_animate {
          0% { 
            transform: perspective(100px) rotateX(0deg) rotateY(0deg);
          } 
          50% { 
            transform: perspective(100px) rotateX(-180deg) rotateY(0deg);
          } 
          100% { 
            transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
          }
        }
        	
        
        
        @keyframes second_object_animate3 {
          0% { 
            transform: perspective(200px) rotateX(0deg) rotateY(0deg);
          } 
          50% { 
            transform: perspective(200px) rotateX(180deg) rotateY(0deg);
          } 
          100% { 
            transform: perspective(200px) rotateX(180deg) rotateY(180deg);
          }
        }
        
        
        @keyframes third_object_animate3 {
          0% { 
            transform: perspective(300px) rotateX(0deg) rotateY(0deg);
          } 
          50% { 
            transform: perspective(300px) rotateX(-180deg) rotateY(0deg);
          } 
          100% { 
            transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
          }
        }
    }

    #loading4{
      background-color: rgba(255,255,255,1);
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 9999;
      margin-top: 0px;
      top: 0px;

        #loading-center{
          width: 100%;
          height: 100%;
          position: relative;
        }
        #loading-center-absolute {
          position: absolute;
          left: 50%;
          top: 50%;
          height: 100px;
          width: 100px;
          margin-top: -50px;
          margin-left: -50px;	
        }
        .object{
          width: 25px;
          height: 25px;
          background-color: rgba(255,255,255,0);
          margin-right: auto;
          margin-left: auto;
          border: 4px solid rgba(239,74,74,1);
          left: 37px;
          top: 37px;
          position: absolute;
        }
        
        #first_object{
          animation: first_object4 1s infinite;
          animation-delay: 0.5s; 
        }
        #second_object{
          animation: second_object4 1s infinite;
        }	
        #third_object{
          animation: third_object4 1s infinite;
          animation-delay: 0.5s; 
        }	
        #forth_object{
          animation: forth_object4 1s infinite;
        }	
            
            	
        @keyframes first_object4 {
          0% {
            transform: translate(1,1) scale(1,1); 
          }
          50% {
            transform: translate(150%,150%) scale(2,2);
          }
             
          100% {
            transform: translate(1,1) scale(1,1); 
          }
        }	
        @keyframes second_object4 {
          0% {
            transform: translate(1,1) scale(1,1); 
          }
          50% {
            transform: translate(-150%,150%) scale(2,2);
          }
          100% {
            transform: translate(1,1) scale(1,1); 
          }
        }
        	
        @keyframes third_object4 {
          0% {
            transform: translate(1,1) scale(1,1); 
          }	
          50% {
            transform: translate(-150%,-150%) scale(2,2);
          }
          100% {
            transform: translate(1,1) scale(1,1); 
          }
        }
        
        	
        @keyframes forth_object4 {
          0% {
            transform: translate(1,1) scale(1,1); 
          }
          50% {
            transform: translate(150%,-150%) scale(2,2);
          }
          100% {
            transform: translate(1,1) scale(1,1); 
          }
        }
    }

    #loading5{
      background-color: #2980b9;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 9999;
      margin-top: 0px;
      top: 0px;
        #loading-center{
          width: 100%;
          height: 100%;
          position: relative;
        }
        #loading-center-absolute {
          position: absolute;
          left: 50%;
          top: 50%;
          height: 118px;
          width: 118px;
          margin-top: -59px;
          margin-left: -59px;
        }
        
        .object{
          width: 20px;
          height: 20px;
          background-color: #FFF;
          margin-right: 20px;
          float: left;
          margin-bottom: 20px;
        }
        .object:nth-child(3n+0) {
          margin-right: 0px;
        }
        
        
        #object_one {
          animation: animate5 1s -0.9s ease-in-out infinite ;
        }
        #object_two {
          animation: animate5 1s -0.8s ease-in-out infinite ;
        }
        #object_three {
          animation: animate5 1s -0.7s ease-in-out infinite ;
        }
        #object_four {
          animation: animate5 1s -0.6s ease-in-out infinite ;
        }
        #object_five {
          animation: animate5 1s -0.5s ease-in-out infinite ;
        }
        #object_six {
          animation: animate5 1s -0.4s ease-in-out infinite ;
        }
        #object_seven {
          animation: animate5 1s -0.3s ease-in-out infinite ;
        }
        #object_eight {
          animation: animate5 1s -0.2s ease-in-out infinite ;
        }
        #object_nine {
          animation: animate5 1s -0.1s ease-in-out infinite ;
        }
 
        
        @keyframes animate5 {
          50% {
            transform: scale(1.5,1.5); 
          }
          100% {
            transform: scale(1,1); 
          }
        }
    }

    #loading6{
        background-color: #3498db;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 9999;
        margin-top: 0px;
        top: 0px;

        #loading-center{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #loading-center-absolute {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 118px;
            width: 72px;
            margin-top: -59px;
            margin-left: -36px;
        }
        .object{
            width: 26px;
            height: 26px;
            background-color:#FFF;
            margin-right: 20px;
            float: left;
            margin-bottom: 20px;
        }
        .object:nth-child(2n+0) {
          margin-right: 0px;
        }
        #object_one {
          animation: object_one6 1s infinite;
        }
        #object_two {
          animation: object_two6 1s infinite;
        }
        #object_three {
          animation: object_three6 1s infinite;
        }
        #object_four {
          animation: object_four6 1s infinite;
        }
        #object_five {
          animation: object_five6 1s infinite;
        }
        #object_six {
          animation: object_six6 1s infinite;
        }
        
        @keyframes object_one6 {
          50% {
            transform: translate(-100px,46px) rotate(-179deg);
          }
          100% {
            transform: translate(0,0); 
          }
        }
        
        @keyframes object_two6 { 
          50% {
            transform: translate(100px,46px) rotate(179deg);
          }
          100% {
            transform: translate(0,0); 
          }
        }
        
        
        @keyframes object_three6 {
          50% {
            transform: translate(-100px,0) rotate(-179deg);
          }
          100% {
            transform: translate(0,0); 
          }
        }
        
        @keyframes object_four6 {
          50% {
            transform: translate(100px,0) rotate(179deg);
          }
          100% {
            transform: translate(0,0); 
          }
        }
        
        @keyframes object_five6 {
            
          50% {
            transform: translate(-100px,-46px) rotate(-179deg);
          }
         
          100% {
            transform: translate(0,0); 
          }
          
        }
        
        @keyframes object_six6 {
            
          50% {
            transform: translate(100px,-46px) rotate(179deg);
          }
         
          100% {
            transform: translate(0,0); 
          }
        }
    }
   
    #loading7{
        background-color: #e74c3c;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 9999;
        margin-top: 0px;
        top: 0px;

        #loading-center{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #loading-center-absolute {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 100px;
            width: 100px;
            margin-top: -50px;
            margin-left: -50px;
        }
        .object{
            width: 25px;
            height: 25px;
            background-color: #FFF;
            margin-right: 50px;
            float: left;
            margin-bottom: 50px;
        }
        .object:nth-child(2n+0) {
            margin-right: 0px;
        }
        
        
        #object_one {
          animation: object_one7 2s infinite;
        }
        #object_two {
          animation: object_two7 2s infinite;
        }
        #object_three {
          animation: object_three7 2s infinite;
        }
        #object_four {
          animation: object_four7 2s infinite;
        }
            
        
        @keyframes object_one7 {
          25% { 
            transform: translate(75px,0) rotate(-90deg) scale(0.5);
          } 
          50% { 
            transform: translate(75px,75px) rotate(-180deg);
          } 
          75% { 
            transform: translate(0,75px) rotate(-270deg) scale(0.5);
          } 
          100% { 
            transform: rotate(-360deg);
          }
        }
        
        @keyframes object_two7 {
          25% { 
            transform: translate(0,75px) rotate(-90deg) scale(0.5);
          } 
          50% { 
            transform: translate(-75px,75px) rotate(-180deg);
          } 
          75% { 
            transform: translate(-75px,0) rotate(-270deg) scale(0.5);
          } 
          100% { 
            transform: rotate(-360deg);
          }
        }
        
        @keyframes object_three7 {
          25% { 
            transform: translate(0,-75px)  rotate(-90deg) scale(0.5);
          } 
          50% { 
            transform: translate(75px,-75px) rotate(-180deg);
          } 
          75% { 
            transform:  translate(75px,0) rotate(-270deg) scale(0.5);
          } 
          100% { 
            transform: rotate(-360deg);
          }
        }
        
        @keyframes object_four7 {
          25% { 
            transform: translate(-75px,0)  rotate(-90deg) scale(0.5);
          } 
          50% { 
            transform: translate(-75px,-75px) rotate(-180deg);
          } 
          75% { 
            transform: translate(0,-75px) rotate(-270deg) scale(0.5);
          } 
          100% { 
            transform: rotate(-360deg);
          }
        }
    }
    
    #loading8{
      background-color: #2c3e50;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 50px;
        width: 50px;
        margin-top: -25px;
        margin-left: -25px;
        transform: rotate(45deg); 
        animation: loading-center-absolute8 1.5s infinite;
      
      }
      .object{
        width: 25px;
        height: 25px;
        background-color: #FFF;
        float: left;
      }
      #object_one {
        animation: object_one8 1.5s infinite;
      }
      #object_two {
        animation: object_two8 1.5s infinite;
      }
      #object_three {
        animation: object_three8 1.5s infinite;
      }
      #object_four {
        animation: object_four8 1.5s infinite;
      }
      
      @keyframes loading-center-absolute8 {
        100% { 
          transform:  rotate(-45deg);
        }
      }
      
      @keyframes object_one8 {
        25% { 
          transform: translate(0,-50px) rotate(-180deg);
        } 
        100% { 
          transform: translate(0,0) rotate(-180deg);
        }
      }
      
      @keyframes object_two8 {
        25% { 
          transform: translate(50px,0) rotate(-180deg);
        } 
        100% { 
          transform: translate(0,0) rotate(-180deg);
        }
      }
      
      @keyframes object_three8 {
        25% { 
          transform:  translate(-50px,0) rotate(-180deg);
        } 
        100% { 
          transform: translate(0,0) rotate(-180deg);
        }
      }
      
      @keyframes object_four8 {
        25% { 
          transform: translate(0,50px) rotate(-180deg); 
        } 
        100% { 
          transform: translate(0,0) rotate(-180deg);
        }
      }
    }

    #loading9{
      background-color: #1e1e20;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 150px;
        width: 150px;
        margin-top: -75px;
        margin-left: -75px;
        transform: rotate(45deg); 
      }
      .object{
        width: 20px;
        height: 20px;
        background-color: #FFF;
        margin-right: 110px;
        float: left;
        margin-bottom: 110px;
      }
      .object:nth-child(2n+0) {
        margin-right: 0px;
      }
      
      
      #object_one {
        animation: object_one9 2s infinite;
      }
      #object_two {
        animation: object_two9 2s infinite;
      }
      #object_three {
        animation: object_three9 2s infinite;
      }
      #object_four {
        animation: object_four9 2s infinite;
      }
      #object_big{
        animation: object_big9 0.5s infinite;
        position: absolute;
        width: 50px;
        height: 50px;
        left: 50px;
        top: 50px;
      }	
      
      
      @keyframes object_big9 {
        25% { 
          transform:  scale(0.5);
        }
      }
      
      @keyframes object_one9 {
        25% { 
          transform: translate(130px,0) rotate(-90deg) ;
        } 
        50% { 
          transform: translate(130px,130px) rotate(-180deg);
        } 
        75% { 
          transform: translate(0,130px) rotate(-270deg) ;
        } 
        100% { 
          transform: rotate(-360deg);
        }
      }
      
      @keyframes object_two9 {
        25% { 
          transform: translate(0,130px) rotate(-90deg) ;
        } 
        50% { 
          transform: translate(-130px,130px) rotate(-180deg);
        } 
        75% { 
          transform: translate(-130px,0) rotate(-270deg) ;
        } 
        100% { 
          transform: rotate(-360deg);
        }
      }
      
      @keyframes object_three9 {
        25% { 
          transform: translate(0,-130px)  rotate(-90deg);
        } 
        50% { 
          transform: translate(130px,-130px) rotate(-180deg);
        } 
        75% { 
          transform:  translate(130px,0) rotate(-270deg) ;
        } 
        100% { 
          transform: rotate(-360deg);
        }
      }
      @keyframes object_four9 {
        25% { 
          transform: translate(-130px,0)  rotate(-90deg) ;
        } 
        50% { 
          transform: translate(-130px,-130px) rotate(-180deg);
        } 
        75% { 
          transform: translate(0,-130px) rotate(-270deg);
        } 
        100% { 
          transform: rotate(-360deg);
        }
      }
    }  

    #loading10{
      background-color: #2a2c2b;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;
      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
        }
      #loading-center-absolute-one {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 300px;
        width: 50px;
        margin-top: -150px;
        margin-left: -25px;	
      }
      #loading-center-absolute-two {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 300px;
        width: 50px;
        margin-top: -150px;
        margin-left: 50px;	
      }
      .object-one{
        width: 18px;
        height: 18px;
        background-color: #FFF;
        float: left;
        margin-top: 15px;
        margin-right: 15px;
        transform: rotate(45deg);
        animation: object-one10 1s infinite;
      }
      .object-two{
        width: 18px;
        height: 18px;
        background-color: #FFF;
        float: left;
        margin-top: 15px;
        margin-right: 15px;
        transform: rotate(45deg);
        animation: object-two10 1s infinite;
      }
      
      
      .object-one:nth-child(6){
        animation-delay: 0.6s;
      }
      .object-one:nth-child(5){
        animation-delay: 0.5s;
      }
      .object-one:nth-child(4){
        animation-delay: 0.4s;
      }
      .object-one:nth-child(3){
        animation-delay: 0.3s;
      }
      .object-one:nth-child(2){
        animation-delay: 0.2s;
      }
          
      .object-two:nth-child(9){
        animation-delay: 0.9s;
      }
      .object-two:nth-child(8){
        animation-delay: 0.8s;
      }
      .object-two:nth-child(7){
        animation-delay: 0.7s;
      }	
      .object-two:nth-child(6){
        animation-delay: 0.6s;
      }
      .object-two:nth-child(5){
        animation-delay: 0.5s;
      }
      .object-two:nth-child(4){
        animation-delay: 0.4s;
      }
      .object-two:nth-child(3){
        animation-delay: 0.3s;
      }
      .object-two:nth-child(2){
        animation-delay: 0.2s;
      }
              	
      @keyframes object-one10{
        50% {
          transform: translate(100px,0);
        }
      }	
      @keyframes object-two10{
        50% {
          transform: translate(-100px,0);
        }
      }
    }
    
    #loading11{
      background-color: #374140;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;
      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 150px;
        width: 150px;
        margin-top: -75px;
        margin-left: -75px;
      }
      .object{
        width: 20px;
        height: 20px;
        background-color: #FFF;
        float: left;
        margin-right: 20px;
        margin-top: 65px;
        border-radius: 50% 50% 50% 50%;
      }
      
      #object_one {	
        animation: object_one11 1.5s infinite;
      }
      #object_two {
        animation: object_two11 1.5s infinite;
        animation-delay: 0.25s;
      }
      #object_three {
        animation: object_three11 1.5s infinite;
        animation-delay: 0.5s;
      }
      
      
      @keyframes object_one11 {
        75% { 
          transform: scale(0);
        }
      }
      
      @keyframes object_two11 {
        75% { 
          transform: scale(0);
        }
      }
      
      
      @keyframes object_three11 {
        75% { 
          transform: scale(0);
        }
      }
    }

    #loading12{
      background-color: #dc3522;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 150px;
        width: 150px;
        margin-top: -75px;
        margin-left: -75px;	
        transform: rotate(45deg); 
      }
      .object{
        width: 20px;
        height: 20px;
        background-color: #FFF;
        position: absolute;
        left: 65px;
        top: 65px;
        border-radius: 50% 50% 50% 50%;
      }
      .object:nth-child(2n+0) {
        margin-right: 0px;
      }
      #object_one {
        animation: object_one12 2s infinite;
        animation-delay: 0.2s; 
      }
      #object_two {
        animation: object_two12 2s infinite;
        animation-delay: 0.3s; 
      }
      #object_three {
        animation: object_three12 2s infinite;
        animation-delay: 0.4s; 
      }
      #object_four {
        animation: object_four12 2s infinite;
        animation-delay: 0.5s; 
      }
      #object_five {
        animation: object_five12 2s infinite;
        animation-delay: 0.6s; 
      }
      #object_six {
        animation: object_six12 2s infinite;
        animation-delay: 0.7s; 
      }
      #object_seven {
        animation: object_seven12 2s infinite;
        animation-delay: 0.8s; 
      }
      #object_eight {
        animation: object_eight12 2s infinite;
        animation-delay: 0.9s; 
      }
      
      #object_big{
        position: absolute;
        width: 50px;
        height: 50px;
        left: 50px;
        top: 50px;
        animation: object_big12 2s infinite;
        animation-delay: 0.5s; 
      }	
      
      @keyframes object_big12 {
        50% { 
          transform: scale(0.5);
        }
      }
      
      @keyframes object_one12 {
        50% { 
          transform: translate(-65px,-65px);
        }
      }
      
      @keyframes object_two12 {
        50% { 
          transform: translate(0,-65px);
        } 
      }
      
      @keyframes object_three12 {
        50% { 
          transform: translate(65px,-65px);
        } 
      }
      
      @keyframes object_four12 {
        50% { 
          transform: translate(65px,0);
        }
      }
      
      @keyframes object_five12 {
        50% { 
          transform: translate(65px,65px);
        }
      }
      
      @keyframes object_six12 {
        50% { 
          transform:  translate(0,65px);
        }
      }
      
      @keyframes object_seven12 {
        50% { 
          transform: translate(-65px,65px);
        }
      }
      @keyframes object_eight12 {
        50% { 
          transform: translate(-65px,0);
        }
      }
    }

    #loading13{
      background-color: #88a825;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 50px;
        width: 200px;
        margin-top: -25px;
        margin-left: -100px;
      }
      .object{
        width: 20px;
        height:20px;
        background-color: #FFF;
        float: left;
        margin-top: 15px;
        border-radius: 50% 50% 50% 50%;
      }
      
      
      #first_object{
        animation: first_object13 2s infinite;
       
      }
      
      #second_object{
        animation: second_object13 2s infinite;
      }	
        
        
        
        
      
      
		
      @keyframes first_object13 {
      
        25% {
          transform: translate(90px,0) scale(2);
        }
      
        50% {
          transform: translate(180px,0) scale(1);
        }	 
       
        75% {
          transform: translate(90px,0) scale(2);
        }	 
       
      
      }
     	
      @keyframes second_object13 {
      
        25% {
          transform: translate(-90px,0) scale(2);
        }
      
        50% {
          transform: translate(-180px,0) scale(1);
        }	 
       
        75% {
          transform: translate(-90px,0) scale(2);
        }	 
       
      
      }
    }

    #loading14{
      background-color: #35203b;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 50px;
        width: 300px;
        margin-top: -25px;
        margin-left: -150px;
      
      }
      .object{
        width: 18px;
        height: 18px;
        background-color: #FFF;
        float: left;
        margin-top: 15px;
        margin-right: 15px;
        border-radius: 50% 50% 50% 50%;
        animation: object14 1s infinite;
      }
      .object:last-child {
        margin-right: 0px;
      }
      
      .object:nth-child(9){
        animation-delay: 0.9s;
      }
      .object:nth-child(8){
        animation-delay: 0.8s;
      }
      .object:nth-child(7){
        animation-delay: 0.7s;
      }	
      .object:nth-child(6){
        animation-delay: 0.6s;
      }
      .object:nth-child(5){
        animation-delay: 0.5s;
      }
      .object:nth-child(4){
        animation-delay: 0.4s;
      }
      .object:nth-child(3){
        animation-delay: 0.3s;
      }
      .object:nth-child(2){
        animation-delay: 0.2s;
      }								
      
     
      @keyframes object14{
        50% {
          transform: translate(0,-50px);
        }
      }
    }
    
    #loading15{
      background-color: #911146;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute-one {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 300px;
        width: 50px;
        margin-top: -150px;
        margin-left: -25px;
      }
      #loading-center-absolute-two {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 300px;
        width: 50px;
        margin-top: -150px;
        margin-left: 50px; 
      }
      .object-one{
        width: 18px;
        height: 18px;
        background-color: #FFF;
        float: left;
        margin-top: 15px;
        margin-right: 15px;
        border-radius: 50% 50% 50% 50%;
        animation: object-one15 1s infinite;
      }
      .object-two{
        width: 18px;
        height: 18px;
        background-color: #FFF;
        float: left;
        margin-top: 15px;
        margin-right: 15px;
        border-radius: 50% 50% 50% 50%;
        animation: object-two15 1s infinite;
      }
      
      .object-one:nth-child(9){
        animation-delay: 0.9s;
      }
      .object-one:nth-child(8){
        animation-delay: 0.8s;
      }
      .object-one:nth-child(7){
        animation-delay: 0.7s;
      }	
      .object-one:nth-child(6){
        animation-delay: 0.6s;
      }
      .object-one:nth-child(5){
        animation-delay: 0.5s;
      }
      .object-one:nth-child(4){
        animation-delay: 0.4s;
      }
      .object-one:nth-child(3){
        animation-delay: 0.3s;
      }
      .object-one:nth-child(2){
        animation-delay: 0.2s;
      }
      .object-two:nth-child(9){
        animation-delay: 0.9s;
      }
      .object-two:nth-child(8){
        animation-delay: 0.8s;
      }
      .object-two:nth-child(7){
        animation-delay: 0.7s;
      }	
      .object-two:nth-child(6){
        animation-delay: 0.6s;
      }
      .object-two:nth-child(5){
        animation-delay: 0.5s;
      }
      .object-two:nth-child(4){
        animation-delay: 0.4s;
      }
      .object-two:nth-child(3){
        animation-delay: 0.3s;
      }
      .object-two:nth-child(2){
        animation-delay: 0.2s;
      }	
      @keyframes object-one15{
        50% {
          transform: translate(100px,0);
        }
      }	
      @keyframes object-two15{
        50% {
          transform: translate(-100px,0);
        }
      }
    }
    
    #loading16{
      background-color: #cf4a30;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;
      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 60px;
        width: 60px;
        margin-top: -30px;
        margin-left: -30px;
        animation: loading-center-absolute16 1s infinite;
      }
      .object{
        width: 20px;
        height: 20px;
        background-color: #FFF;
        float: left;
        border-radius: 50% 50% 50% 50%;
        margin-right: 20px;
        margin-bottom: 20px;	
      }
      .object:nth-child(2n+0) {
        margin-right: 0px;
      }
      #object_one{
        animation: object_one16 1s infinite;
      }
      #object_two{
        animation: object_two16 1s infinite;
      }	
      #object_three{
        animation: object_three16 1s infinite;
      }		
      #object_four{
        animation: object_four16 1s infinite;
      }				
      @keyframes loading-center-absolute16{
        100% {
          transform: rotate(360deg); 
        }
      }	
      @keyframes object_one16{
        50% {
          transform: translate(20px,20px);
        }
      }	
      @keyframes object_two16{
        50% {
          transform: translate(-20px,20px);
        }
      }	
      @keyframes object_three16{
        50% {
          transform: translate(20px,-20px);
        }
      }	
      @keyframes object_four16{
        50% {
          transform: translate(-20px,-20px);
        }
      }

    }
    
    #loading17{
      background-color: #ed8c2b;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;
      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 20px;
        width: 140px;
        margin-top: -10px;
        margin-left: -70px;
        animation: loading-center-absolute17 1s infinite;
      }
      .object{
        width: 20px;
        height: 20px;
        background-color: #FFF;
        float: left;
        border-radius: 50% 50% 50% 50%;
        margin-right: 20px;
        margin-bottom: 20px;	
      }
      .object:last-child {
        margin-right: 0px;
      }
      #object_one{
        animation: object_one17 1s infinite;
      }
      #object_two{
        animation: object_two17 1s infinite;
      }	
      #object_three{
        animation: object_three17 1s infinite;
      }		
      #object_four{
        animation: object_four17 1s infinite;
      }		
      @keyframes loading-center-absolute17{
        100% {
          transform: rotate(360deg); 
        }
      }	
      @keyframes object_one17{
        50% {
          transform: translate(20px,20px);
        }
      }	
      @keyframes object_two17{
        50% {
          transform: translate(-20px,20px);
        }
      }	
      @keyframes object_three17{
        50% {
          transform: translate(20px,-20px);
        }
      }	
      @keyframes object_four17{
        50% {
          transform: translate(-20px,-20px);
        }
      }
    }
    
    #loading18{
      background-color: #db5800;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;
      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 20px;
        width: 100px;
        margin-top: -10px;
        margin-left: -50px;
      
      }
      .object{
        width: 20px;
        height: 20px;
        background-color: #FFF;
        border-radius: 50% 50% 50% 50%;
        margin-right: 20px;
        margin-bottom: 20px;
        position: absolute;	
      }
      
      
      #object_one{
         animation: object18 2s linear infinite;
         }
      #object_two{ 
        animation: object18 2s linear infinite -.4s;
        left:20px;
         }
      #object_three{ 
        animation: object18 2s linear infinite -.8s; 
        left:40px;
        }
      #object_four{ 
        animation: object18 2s linear infinite -1.2s; 
        left:60px;
        } 
      #object_five{ 
        animation: object18 2s linear infinite -1.6s; 
        left:80px;
        }	
      @keyframes object18{
        0% { left: 100px; top:0}
        80% { left: 0; top:0;}
        85% { left: 0; top: -20px; width: 20px; height: 20px;}
        90% { width: 40px; height: 15px; }
        95% { left: 100px; top: -20px; width: 20px; height: 20px;}
        100% { left: 100px; top:0; }
      }
    }

    #loading19{
      background-color: #ff9000;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;
      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 118px;
        width: 118px;
        margin-top: -59px;
        margin-left: -59px;
      
      }
      
      .object{
        width: 20px;
        height: 20px;
        background-color: #FFF;
        margin-right: 20px;
        float: left;
        margin-bottom: 20px;
        border-radius: 50% 50% 50% 50%;
      }
      .object:nth-child(3n+0) {
        margin-right: 0px;
      }
      
      
      #object_one {
        animation: animate19 1s -0.9s ease-in-out infinite ;
      }
      #object_two {
        animation: animate19 1s -0.8s ease-in-out infinite ;
      }
      #object_three {
        animation: animate19 1s -0.7s ease-in-out infinite ;
      }
      #object_four {
        animation: animate19 1s -0.6s ease-in-out infinite ;
      }
      #object_five {
        animation: animate19 1s -0.5s ease-in-out infinite ;
      }
      #object_six {
        animation: animate19 1s -0.4s ease-in-out infinite ;
      }
      #object_seven {
        animation: animate19 1s -0.3s ease-in-out infinite ;
      }
      #object_eight {
        animation: animate19 1s -0.2s ease-in-out infinite ;
      }
      #object_nine {
        animation: animate19 1s -0.1s ease-in-out infinite ;
      }
      
      @keyframes animate19 {
        50% {
          transform: scale(1.5,1.5); 
        }
       
        100% {
          transform: scale(1,1); 
        }
        
      }
    }
    
    #loading20{
      background-color: #f0c600;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 150px;
        width: 150px;
        margin-top: -75px;
        margin-left: -75px;
        border-radius: 50% 50% 50% 50%;
      }
      .object{
        width: 20px;
        height: 20px;
        background-color: #FFF;
        position: absolute;
        border-radius: 50% 50% 50% 50%;
        animation: animate20 0.8s infinite;
      }
      
      
      #object_one {
        top: 19px;
        left: 19px;	
      }
      #object_two {
        top: 0px;
        left: 65px; 
        animation-delay: 0.1s;
      }
      #object_three {
        top: 19px;
        left: 111px; 	
        animation-delay: 0.2s; 
      
      }
      #object_four {
        top: 65px;
        left: 130px; 
        animation-delay: 0.3s; 
      }
      #object_five {
        top: 111px;
        left: 111px; 
        animation-delay: 0.4s; 
      }
      #object_six {
        top: 130px;
        left: 65px;
        animation-delay: 0.5s; 
      }
      #object_seven {
        top: 111px;
        left: 19px;
        animation-delay: 0.6s; 
      }
      #object_eight {
        top: 65px;
        left: 0px;
        animation-delay: 0.7s; 
      }
      
      @keyframes animate20 {
        50% {
          transform: scale(1.5,1.5); 
        }
       
        100% {
          transform: scale(1,1); 
        }
        
      }
    }
    
    #loading21{
      background-color: #8ea106;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 100px;
        width: 40px;
        margin-top: -50px;
        margin-left: -20px;
      }
      .object{
        width: 40px;
        height: 8px;
        margin-bottom:20px;
        background-color: #FFF;
        animation: animate21 0.8s infinite;
      }
      
      
      #object_two { 
        animation-delay: 0.2s;
      }
      #object_three {	
        animation-delay: 0.4s; 
      }
      
      
      @keyframes animate21 {
        50% {
          transform: scale(1.5);  
        }
      
        
      }
    }
    
    #loading22{
      background-color: #59631e;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 100px;
        width: 50px;
        margin-top: -50px;
        margin-left: -25px;
      }
      .object{
        width: 50px;
        height: 8px;
        margin-bottom:15px;
        background-color: #FFF;
        animation: animate22 0.8s infinite;
      }
      
      #object_two { 
        animation-delay: 0.2s;
      }
      
        
      #object_four {	
        animation-delay: 0.2s; 
      }
      
      @keyframes animate22 {
        50% {
          transform: translate(50%,0); 
        }
      
        
      }
    }
   
    #loading23{
      background-color: #334d5c;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;
      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 50px;
        width: 50px;
        margin-top: -25px;
        margin-left: -25px;
      }
      #object_one{
        width: 50px;
        height: 5px;
        background-color: #FFF;
        animation: animate23 2s infinite;
        position: absolute;
        top: 0px;
        right: -200px;
        }
      

      
      @keyframes animate23 {


        50% {
          transform: translate(-400px,0) rotate(-360deg); 
          }
      
       100% {
          transform: translate(0,0) rotate(360deg); 
          }	 	
        
      }
    }
    

    #loading24{
        background-color: #45b29d;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 9999;
        margin-top: 0px;
        top: 0px;
        opacity: 0.7;

        #loading-center{
          width: 100%;
          height: 100%;
          position: relative;
          }
        #loading-center-absolute {
          position: absolute;
          left: 50%;
          top: 50%;
          height: 200px;
          width: 200px;
          margin-top: -100px;
          margin-left: -100px;	
        
        }
        
        .object{
            width: 8px;
            height: 50px;
            margin-right:5px;
            background-color: #FFF;
            animation: animate24 1s infinite;
            float: left;
        }
        
        .object:last-child {
            margin-right: 0px;
        }
        
        .object:nth-child(10){
            animation-delay: 0.9s;	
        }
        .object:nth-child(9){
            animation-delay: 0.8s;	
        }	
        .object:nth-child(8){
            animation-delay: 0.7s;	
        }
        .object:nth-child(7){
            animation-delay: 0.6s;	
        }
        .object:nth-child(6){
            animation-delay: 0.5s;	
        }
        .object:nth-child(5){
            animation-delay: 0.4s;
        }
        .object:nth-child(4){
            animation-delay: 0.3s;		
        }
        .object:nth-child(3){
            animation-delay: 0.2s;	
        }
        .object:nth-child(2){
            animation-delay: 0.1s;
        }						
        
        @keyframes animate24 {
          50% {
            transform: scaleY(0);
          }
        
          
        }
    }

    #loading25{
      background-color: #efc94c;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
        }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 50px;
        width: 150px;
        margin-top: -25px;
        margin-left: -75px;
      
      }
      .object{
        width: 8px;
        height: 50px;
        margin-right:5px;
        background-color: #FFF;
        animation: animate25 1s infinite;
        float: left;
        }
      
      .object:last-child {
        margin-right: 0px;
        }
      
      .object:nth-child(10){
        animation-delay: 0.9s;	
        }
      .object:nth-child(9){
        animation-delay: 0.8s;	
        }	
      .object:nth-child(8){
        animation-delay: 0.7s;	
        }
      .object:nth-child(7){
        animation-delay: 0.6s;	
        }
      .object:nth-child(6){
        animation-delay: 0.5s;	
        }
      .object:nth-child(5){
        animation-delay: 0.4s;
        }
      .object:nth-child(4){
        animation-delay: 0.3s;		
        }
      .object:nth-child(3){
        animation-delay: 0.2s;	
        }
      .object:nth-child(2){
        animation-delay: 0.1s;
        }						
        
      
      @keyframes animate25 {
        50% {
        transform: translateX(-25px) scaleY(0.5);
          }
      
        
      }
    }
    
    #loading26{
      background-color: #e27a3f;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
        }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 50px;
        width: 150px;
        margin-top: -25px;
        margin-left: -75px;
      
      }
      .object{
        width: 8px;
        height: 50px;
        margin-right:5px;
        background-color: #FFF;
        animation: animate26 1s infinite;
        float: left;
        }
      
      .object:last-child {
        margin-right: 0px;
        }
      
      .object:nth-child(10){
        animation-delay: 0.9s;	
        }
      .object:nth-child(9){
        animation-delay: 0.8s;	
        }	
      .object:nth-child(8){
        animation-delay: 0.7s;	
        }
      .object:nth-child(7){
        animation-delay: 0.6s;	
        }
      .object:nth-child(6){
        animation-delay: 0.5s;	
        }
      .object:nth-child(5){
        animation-delay: 0.4s;
        }
      .object:nth-child(4){
        animation-delay: 0.3s;		
        }
      .object:nth-child(3){
        animation-delay: 0.2s;	
        }
      .object:nth-child(2){
        animation-delay: 0.1s;
        }
      
      @keyframes animate26 {
        50% {
        transform: translateX(-25px) scaleY(2);
          }
      
        
      }
    }

    #loading27{
      background-color: #df5a49;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
        }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 200px;
        width: 200px;
        margin-top: -100px;
        margin-left: -100px;	
      
      }
      .object{
        border-radius: 50% 50% 50% 50%;
        position: absolute;
        border-left: 5px solid #FFF;
        border-right: 5px solid #FFF;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        animation: animate27 2s infinite;	
        }
      
      #object_one{
        left: 75px;
        top: 75px;
        width: 50px;
        height: 50px;
        }
                    
      #object_two{
        left: 65px;
        top: 65px;
        width: 70px;
        height: 70px;
        animation-delay: 0.1s;
        }
          
      #object_three{
        left: 55px;
        top: 55px;
        width: 90px;
        height: 90px;
        animation-delay: 0.2s;
        }
      #object_four{
        left: 45px;
        top: 45px;
        width: 110px;
        height: 110px;
        animation-delay: 0.3s;
        
        }
      
      @keyframes animate27 {
      
      50% {
        transform: rotate(180deg); 
        }
          
      100% {
        transform: rotate(0deg); 
        }	  
      
        
      }
    }

    #loading28{
      background-color: #17607d;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 200px;
        width: 200px;
        margin-top: -100px;
        margin-left: -100px;
        transform: rotate(-135deg);
      
      }
      .object{
          border-radius: 50% 50% 50% 50%;
          position: absolute;
          border-top: 5px solid #FFF;
          border-bottom: 5px solid transparent;
          border-left:  5px solid #FFF;
          border-right: 5px solid transparent;
          animation: animate28 2s infinite;	
      }
      
      
      #object_one{
        left: 75px;
        top: 75px;
        width: 50px;
        height: 50px;
      }
                    
      #object_two{
        left: 65px;
        top: 65px;
        width: 70px;
        height: 70px;
        animation-delay: 0.2s;
      }
          
      #object_three{
        left: 55px;
        top: 55px;
        width: 90px;
        height: 90px;
        animation-delay: 0.4s;
      }
      #object_four{
        left: 45px;
        top: 45px;
        width: 110px;
        height: 110px;
        animation-delay: 0.6s;
        
      }
      @keyframes animate28 {
        
        50% {
            transform: rotate(360deg) scale(0.8); 
        }	
        
      }
    }
    
    #loading29{
      background-color: #ff9311;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;

      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
      }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 100px;
        width: 100px;
        margin-top: -50px;
        margin-left: -50px;
      }
      .object{
        position: absolute;
        height: 10px;
        width: 50px;		
        background-color: #FFF;
      }	
      .object:nth-child(2n+0) {
        animation: animate_right29 2s infinite;
      }
      .object:nth-child(2n+1) {
        animation: animate_left29 2s infinite;
      }		
      .object:nth-child(1){
        top: 0px;
        left: 0px;	
      }
      .object:nth-child(2){
        top: 0px;
        left: 50px;
      }
      .object:nth-child(3){
        top: 10px;
        left: 0px;	
        animation-delay: 0.1s;	
      }
      .object:nth-child(4){
        top: 10px;
        left: 50px;
        animation-delay: 0.1s;	
      }
      .object:nth-child(5){
        top: 20px;
        left: 0px;
        animation-delay: 0.2s;	
        }
      .object:nth-child(6){
        top: 20px;
        left: 50px;
        animation-delay: 0.2s;
        }
      .object:nth-child(7){
        top: 30px;
        left: 0px;
        animation-delay: 0.3s;		
        }
      .object:nth-child(8){
        top: 30px;
        left: 50px;
        animation-delay: 0.3s;	
      }
      .object:nth-child(9){
        top: 40px;
        left: 0px;
        animation-delay: 0.4s;
      }				
      .object:nth-child(10){
        top: 40px;
        left: 50px;
        animation-delay: 0.4s;
      }	
      .object:nth-child(11){
        top: 50px;
        left: 0px;	
        animation-delay: 0.5s;
      }				
      .object:nth-child(12){
        top: 50px;
        left: 50px;
        animation-delay: 0.5s;
      }	
      .object:nth-child(13){
        top: 60px;
        left: 0px;	
        animation-delay: 0.6s;
      }				
      .object:nth-child(14){
        top: 60px;
        left: 50px;
        animation-delay: 0.6s;
      }	
      .object:nth-child(15){
        top: 70px;
        left: 0px;
        animation-delay: 0.7s;
      }				
      .object:nth-child(16){
        top: 70px;
        left: 50px;
        animation-delay: 0.7s;
        }
      .object:nth-child(17){
        top: 80px;
        left: 0px;
        animation-delay: 0.8s;
      }				
      .object:nth-child(18){
        top: 80px;
        left: 50px;	
        animation-delay: 0.8s;
      }
      .object:nth-child(19){
        top: 90px;
        left: 0px;	
        animation-delay: 0.9s;
      }				
      .object:nth-child(20){
        top: 90px;
        left: 50px;	
        animation-delay: 0.9s;
      }
      
      @keyframes animate_right29 {
      
      50% {
        transform: translate(200px,-200px) rotate(180deg); 
        }
        }
      
      @keyframes animate_left29 {
      
      50% {
        transform: translate(-200px,-200px) rotate(180deg); 
        }
         
        
        
        }
    }

    #loading30{
      background-color: #d64700;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1000;
      margin-top: 0px;
      top: 0px;
      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
        }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 100px;
        width: 100px;
        margin-top: -50px;
        margin-left: -50px;
      }
      .object{
        position: absolute;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 20px solid  #FFF;
      }
      .object:nth-child(25){
        bottom: 0px;
        left: 80px;
        animation: animate_25 3s infinite ease-in-out;	
      }
      .object:nth-child(24){
        bottom: 0px;
        left: 60px;
        animation: animate_24 3s infinite ease-in-out;			
      }
      .object:nth-child(23){
        bottom: 0px;
        left: 40px;
        animation: animate_23 3s infinite ease-in-out;			
      }
      .object:nth-child(22){
        bottom: 0px;
        left: 20px;
        animation: animate_22 3s infinite ease-in-out;			
      }
      .object:nth-child(21){
        bottom: 0px;
        left: 0px;
        animation: animate_21 3s infinite ease-in-out;		
      }	
      .object:nth-child(20){
        bottom: 0px;
        left: 70px;	
        transform: rotate(180deg);
        animation: animate_20 3s infinite ease-in-out;			
      }	
      .object:nth-child(19){
        bottom: 0px;
        left: 50px;	
        transform: rotate(180deg);
        animation: animate_19 3s infinite ease-in-out;			
      }
      .object:nth-child(18){
        bottom: 0px;
        left: 30px;	
        transform: rotate(180deg);
        animation: animate_18 3s infinite ease-in-out;			
      }
      .object:nth-child(17){
        bottom: 0px;
        left: 10px;	
        transform: rotate(180deg); 
        animation: animate_17 3s infinite ease-in-out;				
      }
      .object:nth-child(16){
        bottom: 20px;
        left: 70px;
        animation: animate_16 3s infinite ease-in-out;					
      }	
      .object:nth-child(15){
        bottom: 20px;
        left: 50px;
        animation: animate_15 3s infinite ease-in-out;					
      }	
      .object:nth-child(14){
        bottom: 20px;
        left: 30px;
        animation: animate_14 3s infinite ease-in-out;				
      }
      .object:nth-child(13){
        bottom: 20px;
        left: 10px;
        animation: animate_13 3s infinite ease-in-out;			
      }
      .object:nth-child(12){
        bottom: 20px;
        left: 60px;	
        transform: rotate(180deg);
        animation: animate_12 3s infinite ease-in-out;		 
      }	
      .object:nth-child(11){
        bottom: 20px;
        left: 40px;
        transform: rotate(180deg);
        animation: animate_11 3s infinite ease-in-out;		
      }
      .object:nth-child(10){
        bottom: 20px;
        left: 20px;	
        transform: rotate(180deg);
        animation: animate_10 3s infinite ease-in-out;		 
      }
      .object:nth-child(9){
        bottom: 40px;
        left: 60px;
        animation: animate_9 3s infinite ease-in-out;			
      }
      .object:nth-child(8){
        bottom: 40px;
        left: 40px;
        animation: animate_8 3s infinite ease-in-out;			
      }
      .object:nth-child(7){
        bottom: 40px;
        left: 20px;
        animation: animate_7 3s infinite ease-in-out;		
      }
      .object:nth-child(6){
        bottom: 40px;
        left: 50px;	
        transform: rotate(180deg);
        animation: animate_6 3s infinite ease-in-out;	
      }
      .object:nth-child(5){
        bottom: 40px;
        left: 30px;
        transform: rotate(180deg);
        animation: animate_5 3s infinite ease-in-out;	
      }
      .object:nth-child(4){
        bottom: 60px;
        left: 50px;
        animation: animate_4 3s infinite ease-in-out;		
      }
      .object:nth-child(3){
        bottom: 60px;
        left: 30px;
        animation: animate_3 3s infinite ease-in-out;		
      }
      .object:nth-child(2){
        bottom: 60px;
        left: 40px;
        transform: rotate(180deg);
        animation: animate_2 3s infinite ease-in-out;	 
      }
      .object:nth-child(1){
        bottom: 80px;
        left: 40px;
        animation: animate_1 3s infinite ease-in-out;
          
      }
      @keyframes animate_1 {
      50% {
        transform: translate(0,-100px) rotate(180deg); 
        }
      }
      @keyframes animate_2 {
      50% {
        transform: translate(0,-80px) rotate(180deg); 
        }
      }
      
      @keyframes animate_3 {
      50% {
        transform: translate(-100px,-100px) rotate(180deg);  
        }
      }
      @keyframes animate_4 {
      50% {
        transform: translate(100px,-100px) rotate(180deg);  
        }
      }
      @keyframes animate_5 {
      50% {
        transform: translate(-40px,-100px) rotate(180deg);  
        }
      }
      @keyframes animate_6 {
      50% {
        transform: translate(40px,-100px) rotate(180deg);  
        }
      }
      @keyframes animate_7 {
      50% {
        transform: translate(-80px,-60px) rotate(180deg); 
        }
      }
      @keyframes animate_8 {
      50% {
        transform: translate(0,-60px) rotate(180deg);   
        }
      }
      @keyframes animate_9 {
      50% {
        transform: translate(80px,-60px) rotate(180deg); 
        }
      }
      @keyframes animate_10 {
      50% {
        transform: translate(-100px,-40px) rotate(180deg); 
        }
      }
      @keyframes animate_11 {
      50% {
        transform: translate(0,-40px) rotate(180deg); 
        }
      }
      
      @keyframes animate_12 {
      50% {
        transform: translate(100px,-40px) rotate(180deg);  
        }
      }
      @keyframes animate_13 {
      50% {
        transform: translate(80px,-80px) rotate(180deg);  
        }
      }
      @keyframes animate_14 {
      50% {
        transform: translate(80px,-40px) rotate(180deg);  
        }
      }	
      @keyframes animate_15 {
      50% {
        transform: translate(-60px,-80px) rotate(180deg);  
        }
      }
      @keyframes animate_16 {
      50% {
        transform: translate(-100px,-40px) rotate(180deg);  
        }
      }	
      
      @keyframes animate_17 {
      50% {
        transform: translate(-100px,-20px) rotate(180deg);  
        }
      }
      @keyframes animate_18 {
      50% {
        transform: translate(-60px,-20px) rotate(180deg);  
        }
      }
      @keyframes animate_19 {
      50% {
        transform: translate(0,-20px) rotate(180deg);  
        }
      }
      @keyframes animate_20 {
      50% {
        transform: translate(60px,-20px) rotate(180deg);  
        }
      }
      @keyframes animate_21 {
      50% {
        transform: translate(-80px,30px) rotate(180deg);  
        }
      }
      @keyframes animate_22 {
      50% {
        transform: translate(-40px,30px) rotate(180deg);  
        }
      }
      @keyframes animate_23 {
      50% {
        transform: translate(0,30px) rotate(180deg);  
        }
      }
      
      @keyframes animate_24 {
      50% {
        transform: translate(40px,30px) rotate(180deg);   
        }
      }		
      @keyframes animate_25 {
      50% {
        transform: translate(80px,30px) rotate(180deg);  
        }
      }
    }
    
    #loading31{
        background-color: #45b29d;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 9999;
        margin-top: 0px;
        top: 0px;

        #loading-center{
          width: 100%;
          height: 100%;
          position: relative;
          }
        #loading-center-absolute {
          position: absolute;
          left: 50%;
          top: 50%;
          height: 200px;
          width: 200px;
          margin-top: -100px;
          margin-left: -100px;
          transform: rotate(-135deg);
        }

        .o2{
          animation: animate31 2s infinite;	
          width:120px;
          height:120px;
          // background: #fff;
          border:2px solid #fff;
          border-radius: 100%;
          position: absolute;
          left:40px;
          top:40px;
        }

        .o3{
          // transform: scale3d(1.25, .75, 1.25);
          animation: animate31_2 2s infinite;	
          width:120px;
          height:120px;
          // background: #fff;
          border:2px solid #fff;
          border-radius: 100%;
          position: absolute;
          left:40px;
          top:40px;
        }
        
        .object{
          width:80px;
          height:80px;
          background: #fff;
          border-radius: 100%;
          animation: pulse 2s infinite;	
          position: absolute;
          left:60px;
          top:60px;
        }


        @keyframes animate31 {

          0%{
            transform: scale3d(1.25, .75, 1.25);
          }
        
          50% {
          
            transform: scale3d(.75, 1.25, .75);
            }	

          100%{
            transform: scale3d(1.25, .75, 1.25);
          } 
        }

        @keyframes animate31_2 {

          0%{
            
            transform: scale3d(.75, 1.25, .75);
          }
        
          50% {
          
            transform: scale3d(1.25, .75, 1.25);
            }	

          100%{
            transform: scale3d(.75, 1.25, .75);
          } 
        }

        @keyframes tomove{

          0%{
            transform: scale3d(1,1,1);
          }
         
        }
    }
    
    
    



  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }

  .animated.infinite {
    animation-iteration-count: infinite;
  }

  .animated.hinge {
    animation-duration: 2s;
  }


  @keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transform: translate3d(0,0,0);
    }

    40%, 43% {
      transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      transform: translate3d(0, -30px, 0);
    }

    70% {
      transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      transform: translate3d(0, -15px, 0);
    }

    90% {
      transform: translate3d(0,-4px,0);
    }
  }

  .bounce {
    animation-name: bounce;
    transform-origin: center bottom;
  }

  @keyframes flash {
    0%, 50%, 100% {
      opacity: 1;
    }

    25%, 75% {
      opacity: 0;
    }
  }

  .flash {
    animation-name: flash;
  }

  @keyframes pulse {
    0% {
      transform: scale3d(1, 1, 1);
    }
    50% {
      transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
      transform: scale3d(1, 1, 1);
    }
  }

  .pulse {
    animation-name: pulse;
  }

  @keyframes rubberBand {
    0% {
      transform: scale3d(1, 1, 1);
    }

    30% {
      transform: scale3d(1.25, 0.75, 1);
    }

    40% {
      transform: scale3d(0.75, 1.25, 1);
    }

    50% {
      transform: scale3d(1.15, 0.85, 1);
    }

    65% {
      transform: scale3d(.95, 1.05, 1);
    }

    75% {
      transform: scale3d(1.05, .95, 1);
    }

    100% {
      transform: scale3d(1, 1, 1);
    }
  }

  .rubberBand {
    animation-name: rubberBand;
  }

  @keyframes shake {
    0%, 100% {
      transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
      transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
      transform: translate3d(10px, 0, 0);
    }
  }

  .shake {
    animation-name: shake;
  }

  @keyframes swing {
    20% {
      transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
      transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
      transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
      transform: rotate3d(0, 0, 1, -5deg);
    }

    100% {
      transform: rotate3d(0, 0, 1, 0deg);
    }
  }

  .swing {
    transform-origin: top center;
    animation-name: swing;
  }
  @keyframes tada {
    0% {
      transform: scale3d(1, 1, 1);
    }

    10%, 20% {
      transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
      transform: scale3d(1, 1, 1);
    }
  }

  .tada {
    animation-name: tada;
  }

  @keyframes wobble {
    0% {
      transform: none;
    }

    15% {
      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    100% {
      transform: none;
    }
  }

  .wobble {
    animation-name: wobble;
  }

  @keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
      opacity: 0;
      transform: scale3d(.3, .3, .3);
    }

    20% {
      transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
      transform: scale3d(.9, .9, .9);
    }

    60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
      transform: scale3d(.97, .97, .97);
    }

    100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

  .bounceIn {
    animation-name: bounceIn;
    animation-duration: .75s;
  }

  @keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
      opacity: 0;
      transform: translate3d(0, -3000px, 0);
    }

    60% {
      opacity: 1;
      transform: translate3d(0, 25px, 0);
    }

    75% {
      transform: translate3d(0, -10px, 0);
    }

    90% {
      transform: translate3d(0, 5px, 0);
    }

    100% {
      transform: none;
    }
  }

  .bounceInDown {
    animation-name: bounceInDown;
  }

  @keyframes bounceInLeft {
    0%, 60%, 75%, 90%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
      opacity: 0;
      transform: translate3d(-3000px, 0, 0);
    }

    60% {
      opacity: 1;
      transform: translate3d(25px, 0, 0);
    }

    75% {
      transform: translate3d(-10px, 0, 0);
    }

    90% {
      transform: translate3d(5px, 0, 0);
    }

    100% {
      transform: none;
    }
  }

  .bounceInLeft {
    animation-name: bounceInLeft;
  }

  @keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
      opacity: 0;
      transform: translate3d(3000px, 0, 0);
    }

    60% {
      opacity: 1;
      transform: translate3d(-25px, 0, 0);
    }

    75% {
      transform: translate3d(10px, 0, 0);
    }

    90% {
      transform: translate3d(-5px, 0, 0);
    }

    100% {
      transform: none;
    }
  }

  .bounceInRight {
            animation-name: bounceInRight;
  }

  @keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
      opacity: 0;
      transform: translate3d(0, 3000px, 0);
    }

    60% {
      opacity: 1;
      transform: translate3d(0, -20px, 0);
    }

    75% {
      transform: translate3d(0, 10px, 0);
    }

    90% {
      transform: translate3d(0, -5px, 0);
    }

    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  .bounceInUp {
    animation-name: bounceInUp;
  }

  @keyframes bounceOut {
    20% {
      transform: scale3d(.9, .9, .9);
    }

    50%, 55% {
      opacity: 1;
      transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
      opacity: 0;
      transform: scale3d(.3, .3, .3);
    }
  }

  .bounceOut {
    animation-name: bounceOut;
    animation-duration: .75s;
  }

  @keyframes bounceOutDown {
    20% {
      transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
      opacity: 1;
      transform: translate3d(0, -20px, 0);
    }

    100% {
      opacity: 0;
      transform: translate3d(0, 2000px, 0);
    }
  }

  .bounceOutDown {
    animation-name: bounceOutDown;
  }

  @keyframes bounceOutLeft {
    20% {
      opacity: 1;
      transform: translate3d(20px, 0, 0);
    }

    100% {
      opacity: 0;
      transform: translate3d(-2000px, 0, 0);
    }
  }

  .bounceOutLeft {
    animation-name: bounceOutLeft;
  }


  @keyframes bounceOutRight {
    20% {
      opacity: 1;
      transform: translate3d(-20px, 0, 0);
    }

    100% {
      opacity: 0;
      transform: translate3d(2000px, 0, 0);
    }
  }

  .bounceOutRight {
    animation-name: bounceOutRight;
  }

  @keyframes bounceOutUp {
    20% {
      transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
      opacity: 1;
      transform: translate3d(0, 20px, 0);
    }

    100% {
      opacity: 0;
      transform: translate3d(0, -2000px, 0);
    }
  }

  .bounceOutUp {
    animation-name: bounceOutUp;
  }

  @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

  .fadeIn {
    animation-name: fadeIn;
  }

  @keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  .fadeInDown {
    animation-name: fadeInDown;
  }


  @keyframes fadeInDownBig {
    0% {
      opacity: 0;
      transform: translate3d(0, -2000px, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  .fadeInDownBig {
    animation-name: fadeInDownBig;
  }

  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  .fadeInLeft {
    animation-name: fadeInLeft;
  }

  @keyframes fadeInLeftBig {
    0% {
      opacity: 0;
      transform: translate3d(-2000px, 0, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  .fadeInLeftBig {
    animation-name: fadeInLeftBig;
  }

  @keyframes fadeInRight {
    0% {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  .fadeInRight {
    animation-name: fadeInRight;
  }

  @keyframes fadeInRightBig {
    0% {
      opacity: 0;
      transform: translate3d(2000px, 0, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  .fadeInRightBig {
    animation-name: fadeInRightBig;
  }

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  .fadeInUp {
    animation-name: fadeInUp;
  }

  @keyframes fadeInUpBig {
    0% {
      opacity: 0;
      transform: translate3d(0, 2000px, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  .fadeInUpBig {
    animation-name: fadeInUpBig;
  }
  @keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
  }

  .fadeOut {
    animation-name: fadeOut;
  }

  @keyframes fadeOutDown {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
  }

  .fadeOutDown {
    animation-name: fadeOutDown;
  }

  @keyframes fadeOutDownBig {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate3d(0, 2000px, 0);
    }
  }

  .fadeOutDownBig {
    animation-name: fadeOutDownBig;
  }

  @keyframes fadeOutLeft {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
  }

  .fadeOutLeft {
    animation-name: fadeOutLeft;
  }

  @keyframes fadeOutLeftBig {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate3d(-2000px, 0, 0);
    }
  }

  .fadeOutLeftBig {
    animation-name: fadeOutLeftBig;
  }

  @keyframes fadeOutRight {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  }

  .fadeOutRight {
    animation-name: fadeOutRight;
  }


  @keyframes fadeOutRightBig {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate3d(2000px, 0, 0);
    }
  }

  .fadeOutRightBig {
    animation-name: fadeOutRightBig;
  }

  @keyframes fadeOutUp {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
  }

  .fadeOutUp {
    animation-name: fadeOutUp;
  }

  @keyframes fadeOutUpBig {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate3d(0, -2000px, 0);
    }
  }

  .fadeOutUpBig {
    animation-name: fadeOutUpBig;
  }

  @keyframes flip {
    0% {
      transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      animation-timing-function: ease-out;
    }

    40% {
      transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
      animation-timing-function: ease-out;
    }

    50% {
      transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
      animation-timing-function: ease-in;
    }

    80% {
      transform: perspective(400px) scale3d(.95, .95, .95);
      animation-timing-function: ease-in;
    }

    100% {
      transform: perspective(400px);
      animation-timing-function: ease-in;
    }
  }

  .animated.flip {
    backface-visibility: visible;
    animation-name: flip;
  }


  @keyframes flipInX {
    0% {
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transition-timing-function: ease-in;
      opacity: 0;
    }

    40% {
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transition-timing-function: ease-in;
    }

    60% {
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }

    80% {
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
      transform: perspective(400px);
    }
  }

  .flipInX {
    backface-visibility: visible !important;
    animation-name: flipInX;
  }

  @keyframes flipInY {
    0% {
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transition-timing-function: ease-in;
      opacity: 0;
    }

    40% {
      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      transition-timing-function: ease-in;
    }

    60% {
      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      opacity: 1;
    }

    80% {
      transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    100% {
      transform: perspective(400px);
    }
  }

  .flipInY {
    backface-visibility: visible !important;
    animation-name: flipInY;
  }

  @keyframes flipOutX {
    0% {
      transform: perspective(400px);
    }

    30% {
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      opacity: 1;
    }

    100% {
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      opacity: 0;
    }
  }

  .flipOutX {
    animation-name: flipOutX;
    animation-duration: .75s;
    backface-visibility: visible !important;
  }

  @keyframes flipOutY {
    0% {
      transform: perspective(400px);
    }

    30% {
      transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
      opacity: 1;
    }

    100% {
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      opacity: 0;
    }
  }

  .flipOutY {
    backface-visibility: visible !important;
    animation-name: flipOutY;
    animation-duration: .75s;
  }

  @keyframes lightSpeedIn {
    0% {
      transform: translate3d(100%, 0, 0) skewX(-30deg);
      opacity: 0;
    }

    60% {
      transform: skewX(20deg);
      opacity: 1;
    }

    80% {
      transform: skewX(-5deg);
      opacity: 1;
    }

    100% {
      transform: none;
      opacity: 1;
    }
  }

  .lightSpeedIn {
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out;
  }
  @keyframes lightSpeedOut {
    0% {
      opacity: 1;
    }

    100% {
      transform: translate3d(100%, 0, 0) skewX(30deg);
      opacity: 0;
    }
  }

  .lightSpeedOut {
    animation-name: lightSpeedOut;
    animation-timing-function: ease-in;
  }

  @keyframes rotateIn {
    0% {
      transform-origin: center;
      transform: rotate3d(0, 0, 1, -200deg);
      opacity: 0;
    }

    100% {
      transform-origin: center;
      transform: none;
      opacity: 1;
    }
  }

  .rotateIn {
    animation-name: rotateIn;
  }
  @keyframes rotateInDownLeft {
    0% {
      transform-origin: left bottom;
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }

    100% {
      transform-origin: left bottom;
      transform: none;
      opacity: 1;
    }
  }

  .rotateInDownLeft {
    animation-name: rotateInDownLeft;
  }

  @keyframes rotateInDownRight {
    0% {
      transform-origin: right bottom;
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }

    100% {
      transform-origin: right bottom;
      transform: none;
      opacity: 1;
    }
  }

  .rotateInDownRight {
    animation-name: rotateInDownRight;
  }

  @keyframes rotateInUpLeft {
    0% {
      transform-origin: left bottom;
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }

    100% {
      transform-origin: left bottom;
      transform: none;
      opacity: 1;
    }
  }

  .rotateInUpLeft {
    animation-name: rotateInUpLeft;
  }

  @keyframes rotateInUpRight {
    0% {
      transform-origin: right bottom;
      transform: rotate3d(0, 0, 1, -90deg);
      opacity: 0;
    }

    100% {
      transform-origin: right bottom;
      transform: none;
      opacity: 1;
    }
  }

  .rotateInUpRight {
    animation-name: rotateInUpRight;
  }


  @keyframes rotateOut {
    0% {
      transform-origin: center;
      opacity: 1;
    }

    100% {
      transform-origin: center;
      transform: rotate3d(0, 0, 1, 200deg);
      opacity: 0;
    }
  }

  .rotateOut {
    animation-name: rotateOut;
  }


  @keyframes rotateOutDownLeft {
    0% {
      transform-origin: left bottom;
      opacity: 1;
    }

    100% {
      transform-origin: left bottom;
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }
  }

  .rotateOutDownLeft {
    animation-name: rotateOutDownLeft;
  }

  @keyframes rotateOutDownRight {
    0% {
      transform-origin: right bottom;
      opacity: 1;
    }

    100% {
      transform-origin: right bottom;
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  }

  .rotateOutDownRight {
    animation-name: rotateOutDownRight;
  }

  @keyframes rotateOutUpLeft {
    0% {
      transform-origin: left bottom;
      opacity: 1;
    }

    100% {
      transform-origin: left bottom;
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  }

  .rotateOutUpLeft {
      animation-name: rotateOutUpLeft;
  }
  @keyframes rotateOutUpRight {
    0% {
      transform-origin: right bottom;
      opacity: 1;
    }

    100% {
      transform-origin: right bottom;
      transform: rotate3d(0, 0, 1, 90deg);
      opacity: 0;
    }
  }

  .rotateOutUpRight {
    animation-name: rotateOutUpRight;
  }

  @keyframes hinge {
    0% {
      transform-origin: top left;
      animation-timing-function: ease-in-out;
    }

    20%, 60% {
      transform: rotate3d(0, 0, 1, 80deg);
      transform-origin: top left;
      animation-timing-function: ease-in-out;
    }

    40%, 80% {
      transform: rotate3d(0, 0, 1, 60deg);
      transform-origin: top left;
      animation-timing-function: ease-in-out;
      opacity: 1;
    }

    100% {
      transform: translate3d(0, 700px, 0);
      opacity: 0;
    }
  }

  .hinge {
    animation-name: hinge;
  }


  @keyframes rollIn {
    0% {
      opacity: 0;
      transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  .rollIn {
    animation-name: rollIn;
  }

  @keyframes rollOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
  }

  .rollOut {
    animation-name: rollOut;
  }

  @keyframes zoomIn {
    0% {
      opacity: 0;
      transform: scale3d(.3, .3, .3);
    }

    50% {
      opacity: 1;
    }
  }

  .zoomIn {
    animation-name: zoomIn;
  }

  @keyframes zoomInDown {
    0% {
      opacity: 0;
      transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
      animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
      opacity: 1;
      transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
  }

  .zoomInDown {
    animation-name: zoomInDown;
  }
  @keyframes zoomInLeft {
    0% {
      opacity: 0;
      transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
      animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
      opacity: 1;
      transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
  }

  .zoomInLeft {
    animation-name: zoomInLeft;
  }

  @keyframes zoomInRight {
    0% {
      opacity: 0;
      transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
      animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
      opacity: 1;
      transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
  }

  .zoomInRight {
    animation-name: zoomInRight;
  }

  @keyframes zoomInUp {
    0% {
      opacity: 0;
      transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
      animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
      opacity: 1;
      transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
  }

  .zoomInUp {
    animation-name: zoomInUp;
  }

  @keyframes zoomOut {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0;
      transform: scale3d(.3, .3, .3);
    }

    100% {
      opacity: 0;
    }
  }

  .zoomOut {
    animation-name: zoomOut;
  }

  @keyframes zoomOutDown {
    40% {
      opacity: 1;
      transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
      animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    100% {
      opacity: 0;
      transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
      transform-origin: center bottom;
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
  }

  .zoomOutDown {
    animation-name: zoomOutDown;
  }

  @keyframes zoomOutLeft {
    40% {
      opacity: 1;
      transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }

    100% {
      opacity: 0;
      transform: scale(.1) translate3d(-2000px, 0, 0);
      transform-origin: left center;
    }
  }

  .zoomOutLeft {
    animation-name: zoomOutLeft;
  }

  @keyframes zoomOutRight {
    40% {
      opacity: 1;
      transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }

    100% {
      opacity: 0;
      transform: scale(.1) translate3d(2000px, 0, 0);
      transform-origin: right center;
    }
  }

  .zoomOutRight {
    animation-name: zoomOutRight;
  }

  @keyframes zoomOutUp {
    40% {
      opacity: 1;
      transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
      animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    100% {
      opacity: 0;
      transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
      transform-origin: center bottom;
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
  }

  .zoomOutUp {
    animation-name: zoomOutUp;
  }

  @keyframes slideInDown {
    0% {
      transform: translateY(-100%);
      visibility: visible;
    }

    100% {
      transform: translateY(0);
    }
  }
  .slideInDown {
    animation-name: slideInDown;
  }
  @keyframes slideInLeft {
    0% {
      transform: translateX(-100%);
      visibility: visible;
    }

    100% {
      transform: translateX(0);
    }
  }

  .slideInLeft {
    animation-name: slideInLeft;
  }

  @keyframes slideInRight {
    0% {
      transform: translateX(100%);
      visibility: visible;
    }
    100% {
      transform: translateX(0);
    }
  }

  .slideInRight {
    animation-name: slideInRight;
  }
  @keyframes slideInUp {
    0% {
      transform: translateY(100%);
      visibility: visible;
    }

    100% {
      transform: translateY(0);
    }
  }

  .slideInUp {
    animation-name: slideInUp;
  }

  @keyframes slideOutDown {
    0% {
      transform: translateY(0);
    }

    100% {
      visibility: hidden;
      transform: translateY(100%);
    }
  }

  .slideOutDown {
    animation-name: slideOutDown;
  }
  @keyframes slideOutLeft {
    0% {
      transform: translateX(0);
    }
    100% {
      visibility: hidden;
      transform: translateX(-100%);
    }
  }

  .slideOutLeft {
    animation-name: slideOutLeft;
  }
  @keyframes slideOutRight {
    0% {
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      transform: translateX(100%);
    }
  }

  .slideOutRight {
    animation-name: slideOutRight;
  }

  @keyframes slideOutUp {
    0% {
      transform: translateY(0);
    }
    100% {
      visibility: hidden;
      transform: translateY(-100%);
    }
  }
  .slideOutUp {
    animation-name: slideOutUp;
  }

}